<template>
  <el-dialog
      v-dialog-drag
      :title=title
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :width="dlgWidth">
    <slot name="content"></slot>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleCancelClick">取 消</el-button>
      <el-button size="mini" type="primary" @click="handleOk($slots.content[0], closeDlg)">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "BaseDialog",
  props: {
    title: {
      default: "表单",
      type: String
    },
    message: {
      type: String
    },
    icon: {
      type: String,
      default: "info"
    },
    handleCancel: {
      type: Function
    },
    handleOk: {
      type: Function
    },
    width: {
      default: "40",
      type: String
    }
  },
  data() {
    return {
      dialogVisible: true,
    }
  },
  methods: {
    handleCancelClick() {
      this.dialogVisible = false;
      this.handleCancel();
    },
    closeDlg() {
      this.dialogVisible = false;
    }
    // handleOkClick() {
    //   this.dialogVisible = false;
    //   this.handleOk();
    // },

  },
  computed: {
    dlgWidth() {
      return this.width + "%";
    }
  },

}
</script>

<style scoped>
::v-deep .el-dialog__body {
  padding: 20px 10px 0;
}

::v-deep .el-dialog__header {
  padding: 2px 10px 2px;
  background-color: #1989fa;
  color: white;
}

::v-deep .el-dialog__title {
  color: white;
  font-size: 13px;
  font-family: 微软雅黑, serif;
}

::v-deep .el-dialog__headerbtn {
  top: 6px;
}

::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
</style>